<template>
  <div class="mon-head">
    <img src="../assets/monitor/log_title_white.png"/>
    <el-dropdown @command="handleCommand" v-show="userList.state" trigger="click">
  <span class="el-dropdown-link">
    实验组成员<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command='user' v-for="user,index in userList.user" :key="index">{{user}} <i style="color: red; float: right">X</i> </el-dropdown-item>
        <el-dropdown-item command="add" divided>添加用户</el-dropdown-item>
        <el-dropdown-item command="home" divided>回到首页</el-dropdown-item>
        <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span @click="dialogFormVisible1 = true" style="font-size: 22px;float: right;;margin-right: 20px;margin-top: 12px">教师评价</span>
    <span v-if='state.state' @click="dialogFormVisible = true" style="float: right;margin-right: 20px;font-size: 22px;"><img src="../assets/monitor/ico_ask.png" style="vertical-align: middle;" />   求助提问</span>
    <span v-else @click="handsDown" style="float: right;margin-right: 20px;font-size: 22px;"><img src="../assets/monitor/ico_ask.png" style="vertical-align: middle;"/>取消提问</span>
      <!--<div v-if='state.state' @click="dialogFormVisible = true" class="ask"><img src="../assets/monitor/ico_ask.png" style="vertical-align: middle;" />   求助提问</div>-->
      <!--<div v-else @click="handsDown" class="ask"><img src="../assets/monitor/ico_ask.png"/>取消提问</div>-->
    <el-dialog title="举手求助" :visible.sync="dialogFormVisible" class="help-dialog" width="20%">
      <div><el-button @click="handsUp">设备故障求助</el-button></div>
      <div><el-button @click="handsUp">技术问题求助</el-button></div>
      <div><el-button @click="dialogFormVisible = false">取 消</el-button></div>
    </el-dialog>

    <el-dialog title="教师评价" :visible.sync="dialogFormVisible1" class="help-dialog" width="20%">
      <div>
        <el-rate v-model="score"></el-rate>
      </div>
      <div>
        <el-button @click="dorate">提 交</el-button>
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getGroupUser, monitorLogout, handsUp, handsDown, doRate} from '@/api/api'
  export default {
    data () {
      return {
        userList: {
          user: [],
          state: false
        },
        state: {
          state: true
        },
        score: 0,
        dialogFormVisible: false,
        dialogFormVisible1: false
      }
    },
    created () {
      this.getUser()
    },
    methods: {
      getUser () {
        getGroupUser().then(res => {
          this.userList.user = res.data
          if (res.data.length) {
            this.userList.state = true
          } else {
            this.userList.state = false
            this.$router.push({path: '/monitor/login'}) // 没用户直接退回登录界面
          }
        }).catch(error => {
          console.log('获取用户失败', error)
          this.userList.state = false
        })
      },
      login () {
        this.$router.push({path: '/monitor/login'})
      },
      home () {
        this.$router.push({path: '/monitor/explain'})
      },
      logout () {
        monitorLogout().then(res => {
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          this.getUser()
        })
      },
      handleCommand (command) {
        switch (command) {
          case 'add':
            this.login()
            break
          case 'home':
            this.home()
            break
          case 'logout':
            this.logout()
            break
          default:
            this.logout()
            break
        }
      },
      handsUp () {
        try {
          handsUp().then((res) => {
            this.state.state = false
            this.dialogFormVisible = false
          })
        } catch (err) {
          console.log('请求失败', err)
        }
      },
      handsDown () {
        try {
          handsDown().then((res) => {
            this.state.state = true
          })
        } catch (err) {
          console.log('请求失败', err)
        }
      },
      dorate () {
        this.dialogFormVisible1 = false
        doRate({score: this.score}).then(res => {
          this.dialogFormVisible1 = false
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .mon-head {
    height: 72px;
    background: #244997;
    img {
      margin-top: 15px;
      margin-left: 5px;
    }
  }
  .el-dropdown {
    float: right;
    margin-top: 10px;
    .el-dropdown-link {
      color: #5dff78;
      font-size: 26px;
    }
  }

</style>
